<template>
  <div class="serve">
     <!-- 头部 -->
    <InsideHeader :bannerType="bannerType"></InsideHeader>

    <!-- 面包屑 -->
    <!-- <crumb></crumb> -->
    <div class="crumb">
            <div class="block">  
                <div class="crumbL">
                    <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-serveList'}" class="on">服务支持</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'serve-serveQuery'}" class="on">问询与建议</nuxt-link>
                    <div class="clear"></div>
                </div>
                <div class="crumbR">
                    <nuxt-link :to="{name: 'serve-serveQuestionsW'}">我要提问</nuxt-link>
                    <nuxt-link :to="{name: 'serve-serveQuery'}">我要查询</nuxt-link>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>

    <!-- serveQuestionsW -->
    <div class="block">
        <div class="serveQuestionsW">
            <!-- Ctit -->
            <div class="Ctit">
                <p>{{dialogVisible?'问询与建议':'问询详情'}}</p>
            </div>
            <div class="serveQuestionsWC" v-if="dialogqueryVisible">
                <div class="certificateWtit">
                    <p>我要查询</p>
                </div>
                <div class="serveQuestionsWCI">
                    <div class="serveQuestionsWCIS serveQuestionsWCISl">
                        <p><em>*</em>问询编号：</p>
                        <input type="text" v-model="inquiriesNo" placeholder="请输入问询编号" />
                        <div class="clear"></div>
                    </div>
                    <div class="serveQuestionsWCIS serveQuestionsWCISr">
                        <p><em>*</em>问询邮箱：</p>
                        <input type="text" v-model="emai" placeholder="请输入邮箱"/>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="serveQuestionsWCI">
                    <div class="serveQuestionsWCIE">
                        <div class="serveQuestionsWCIER">
                            <input type="submit" value="确认提交" @click="onSubmit"  class="serveQuestionsWCIERbtn"/>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="memberInquiryDetailsC" v-if="!dialogqueryVisible">
                    <div class="memberInquiryDetailsCO">
                        <p class="memberInquiryDetailsCOtit">编号：{{queryinfo.inquiriesNo}}</p>

                        <div class="memberInquiryDetailsCOQ">
                            <div class="memberInquiryDetailsCOQL">
                                <h4>用户{{queryinfo.realName}} <em>{{queryinfo.createTime}}</em></h4>
                                <p>{{queryinfo.content}}</p>
                            </div>
                            <div class="memberInquiryDetailsCOQR">
                              <div class="imglist" v-for="(item,index) in queryinfo.annexFileVos" :key="index">
                                <img :src="uploadurl+item.filePath" />
                              </div>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="memberInquiryDetailsCOQ" :class="[item.status==2?'memberInquiryDetailsCOQs':'']"  v-for="(item,index) in queryinfo.inquiresReplyVos" >
                            <div class="memberInquiryDetailsCOQL">
                                <h4>{{item.status==1?item.replyUserName:'管理员'}} <em>{{item.createTime}}</em></h4>
                                <p>{{item.replyContent}}</p>
                            </div>
                            <div class="memberInquiryDetailsCOQR">
                                  <div class="imglist" v-for="(itemb,index) in queryinfo.annexFileVos" :key="index">
                                <img :src="uploadurl+itemb.filePath" />
                              </div>
                                <div class="clear"></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                   
                        <a @click="pursuantfun" class="memberInquiryDetailsCOJ">继续追问</a>
                        <div class="memberInquiryDetailsCOF" v-if="pursuant">
                            <textarea placeholder="请输入您的回复内容" v-model="replyContent"></textarea>
                            <div class="memberInquiryDetailsCOFR">
                                 <el-upload
                                    class="imglistupload"
                                    headers="multipart/form-data"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                                    :http-request="submitUpload"
                                    :before-upload="beforeAvatarUpload">
                                      <i class="el-icon-plus"></i>
                                    </el-upload>
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="memberInquiryDetailsCOB" v-if="pursuant">
                            <p>注：照片只支持.jpg格式</p>
                            <input type="submit" value="确认回复" @click="confirmReply"/>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    
   
    <!-- 链接 -->
    <Insidelink></Insidelink>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import qs from 'qs';
import "@/assets/css/home.css";
import "@/assets/css/serve.css";
import "@/assets/css/member.css";
import InsideHeader from "@/components/head";
import HomeHooter from "@/components/footer";
import crumb from "@/components/crumb";
import Insidelink from "@/components/link";

export default {
  name: "serveQuery",
  data() {
    return {
        inquiriesNo:'',
        emai:'',
        dialogqueryVisible:true,
        queryinfo:{},
        pursuant:false,
        replyContent:'',
        imageUrl:''
    };
  },
  components: {
    InsideHeader,
    HomeHooter,
    crumb,
    Insidelink
  },
  methods: {
    //确认回复
    confirmReply(){
        let id = this.$axios,
        params = qs .stringify({
            inquiriesOid:this.queryinfo.oid,
            replyContent:this.replyContent,
            fileUrls:this.imageUrl
        });
      this.$api.serve.replyInquiresInfo(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
           this.$message.success("追问成功");
           location.reload()
        }else{
          this.$message({message:result.msg ,type: 'warning'});
        }
      });
    },
    //显示追问
    pursuantfun(){
      this.pursuant=!this.pursuant
    },
     //上传图片
    submitUpload(f) {
      let file = new FormData(),
        id = this.$axios;
      file.append("file", f.file);
      this.$api.serve.fileUpload(id, file).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.$message.success("图片上传成功");
          if(this.imageUrl){
            this.imageUrl = this.imageUrl+','+result.data;
          }else{
            this.imageUrl = result.data;
          }
        } else {
          this.$message.error(result.msg);
        }
      });
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    //查询
    onSubmit(){
      if(this.inquiriesNo==''){
        this.$message({message: '请输入问询编号',type: 'warning'});
        return
      }
      if(this.emai==''){
        this.$message({message: '请输入邮箱',type: 'warning'});
        return
      }
      let id = this.$axios,
        params = {
            inquiriesNo:this.inquiriesNo,
            emai:this.emai
        };
      this.$api.serve.getInquiresInfo(id, params).then(res => {
        let result = res.data;
        if (result.code === -1) {
           this.$message({message: '请输入正确的查询信息',type: 'warning'});
           return
        }else{
          this.dialogqueryVisible=false
          this.queryinfo=result.data
        }
      });
    }
  },
  mounted(){
     this.uploadurl=this.comsys.uploadurl()
  }
};
</script>

<style scoped>
.imglist{
  width: 160px;
  height: 160px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
border-radius: 5px;
border:1px solid #f1f1f1;
line-height: 165px;
}
.imglist:nth-child(3n){
  margin-right: 0
}
.imglist img{
  width: 100%;
  height: auto;
  margin: 0;
  vertical-align: middle;
  max-height: 165px;
}
</style>